<!--
 * @Descripttion: 
 * @version: 
 * @@Company: DCIT-SH
 * @Author: 王富银
 * @Date: 2024-08-16 21:18:22
 * @LastEditors: Sunny Chen
 * @LastEditTime: 2024-08-21 13:03:36
-->
<template>
    <div class="header" ref="header">
        <span>共享电动车管理平台</span>
        <div class="menu">
            <el-icon color="white" @click="toHome"><Menu /></el-icon>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import {Menu} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
const router = useRouter();
const header = ref(null);
const emits = defineEmits(['closeDataCenter'])
onMounted(() => {
  header.value.style.width = window.innerWidth + "px";
  header.value.style.height = window.innerHeight * 0.06 + "px";
});
const toHome = ()=>{
    emits('closeDataCenter');
    router.push({path:'/'});
}
</script>
<style scoped>
.header{
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('/src/assets/ui/header.png');
    opacity: 0.5;
}
.header span{
    color: white;
    font-size: 25px;
    font-weight: 600;
}
.header .menu{
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 10px;
    border-radius: 50%;
    background-color: #4086D3;
}
.header .menu:hover{
    cursor: pointer;
}
</style>
